<template>
  <div>
    <div class="container">
      <div id="CategoryChart" :style="{width: '100%', height: '350px'}"></div>
    </div>
  </div>
</template>

<script>
import { getCategoryCount,getCategoryList } from "@/api/home/home";
export default {
  name: 'CategoryChart',
  data () {
    return {
      msg: 'Welcome to kalacloud.com',
      getShowData: [] // 添加一个用于存储数据的数组
    }
  },
  mounted(){
    this.getData();// 获取数据
  },
  methods: {
    drawPie() {
      let myChart = this.$echarts.init(document.getElementById('CategoryChart'))
      myChart.setOption({
        tooltip: {},
        legend: {
          top: "bottom",
        },
        series: [{
          name: '数量',
          type: 'pie',
          data: this.getShowData, // 使用this.getShowData中的数据绘制图表
          radius: [15, 95],
          center: ['50%', '38%'],
          roseType: 'area',
          itemStyle: {
            borderRadius: 6
          },
          // label: {
          //   fontSize: 16, // 设置标签字体大小
          // },

        }],
      });
    },

    //获取分类数据
    getData() {
      let categoryList=[];
      let categoryCount=[];
      getCategoryList().then(res => {
        let newData=[]
        categoryList = res;
        getCategoryCount().then(response => {
          categoryCount = response;
          categoryList.forEach(category => {
            const matchingCount = categoryCount.find(count => count.categoryId === category.id);
            if (matchingCount) {
              newData.push({
                categoryId:category.id,
                name: category.name,
                value: matchingCount.categoryCount
              });
            }
          });
          this.getShowData=newData
          this.drawPie()
        })
      })
    }

  }
}
</script>
